<template>
	<view class="praise-box" @click="onClick">
		<image class="img" :src="getIsPraise" />
		<text class="txt">点赞</text>
	</view>
</template>

<script>
	import { mapActions } from 'vuex';
	import { userPraise } from 'api/user';
	export default {
		name: "article-praise",
		props: {
			/**
			 * 数据源
			 */
			articleData: {
				type: Object,
				required: true
			}
		},
		data() {
			return {};
		},
		methods: {
			...mapActions('user', ['isLogin']),
			async onClick() {
				if (!(await this.isLogin())) return
				uni.showLoading({
					title: '加载中'
				})
				// 点赞
				await userPraise({
					articleId: this.articleData.articleId,
					isPraise: !this.articleData.isPraise
				})
				// 关闭加载
				// uni.hideLoading()
				this.$emit('changePraise', !this.articleData.isPraise)
			}
		},
		computed: {
			getIsPraise() {
				return this.articleData && this.articleData.isPraise ?
					'/static/images/praise.png' :
					'/static/images/un-praise.png'
			}
		}
	}
</script>

<style lang="scss" scoped>
	.praise-box {
		display: flex;
		flex-direction: column;

		.img {
			width: $uni-img-size-base;
			height: $uni-img-size-base;
			color: $uni-text-color;
		}

		.txt {
			font-size: $uni-font-size-sm;
			color: $uni-text-color;
		}
	}
</style>
